/* Mobile layout for three column sections - Stacked vertically with centered buttons */
@media (max-width: 767px) {
  /* Target the container with the three columns */
  div[data-component-theme="portalThemeColor7"] .container {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    padding: 15px 10px !important;
  }
  
  /* Style each column */
  div[data-component-theme="portalThemeColor7"] .col-md-4 {
    flex: 0 0 auto !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 15px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Text alignment - left justified */
  div[data-component-theme="portalThemeColor7"] .col-md-4 h3 {
    text-align: left !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
  }
  
  div[data-component-theme="portalThemeColor7"] .col-md-4 p {
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    flex-grow: 1 !important;
  }
  
  /* Center the buttons */
  div[data-component-theme="portalThemeColor7"] .col-md-4 button {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: fit-content !important;
    min-width: 140px !important;
    padding: 12px 24px !important;
  }
}

/* For very small phones */
@media (max-width: 375px) {
  div[data-component-theme="portalThemeColor7"] .container {
    gap: 15px !important;
    padding: 10px 8px !important;
  }
  
  div[data-component-theme="portalThemeColor7"] .col-md-4 {
    padding: 15px 12px !important;
  }
  
  div[data-component-theme="portalThemeColor7"] .col-md-4 h3 {
    font-size: 18px !important;
  }
  
  div[data-component-theme="portalThemeColor7"] .col-md-4 p {
    font-size: 14px !important;
  }
}